<template>
  <div class="home-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="55"
        @load="getData"
      >
        <div class="con-list">
          <ul>
            <li v-for="(item, index) in list" :key="index" @click="goDetails(item.id)">
              <div class="cl-title"><span v-if="state == 2">VIP</span>{{item.title}}</div>
              <div class="cl-show" v-if="state == 2">{{item.content}}</div>
              <div class="cl-con clearfix">
                <div class="cl-info fl clearfix">
                  <div class="cl-img fl">
                    <img :src="item.image_path">
                  </div>
                  <div class="cl-text fl">
                    <p>{{item.author}}</p>
                    <p>
                      <span>发表于{{item.cea_time}}</span>
                    </p>
                  </div>
                </div>
                <div class="see-num fr">
                  <van-icon name="browsing-history"></van-icon>
                  <span>{{item.watch}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List, Cell, Icon } from 'vant'
import { GET } from '../../api/common'
export default {
  name: "homeList",
  props: ['curIndex'],
  components: {
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
  },
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      totalAmount: 0,
      totalPages: 0,
      pageIndex: 0,
      pageSize: 5,
      isNone: false
    };
  },
  computed: {
    state() {
      return this.curIndex + 1
    }
  },
  created() {
  },
  methods: {
    getData(isRefresh) {

      if (isRefresh) {
        this.pageIndex = 0
        this.isNone = false
      }

      if (this.isNone) {
        return
      }

      this.pageIndex ++

      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        state: this.state
      }
      GET('api/article', params).then((res) => {

        this.totalAmount = res.data.totalAmount
        // this.totalPages = (this.totalAmount + this.pageSize - 1) / this.pageSize

        if (isRefresh) {
          this.list = []
          this.finished = false
          this.refreshing = false
          window.scrollTo(0, 10)
        }

        res.data.records.forEach((item, index) => {
          this.list.push(item)
        })
        this.loading = false

        if (this.list.length >= this.totalAmount) {
          this.isNone = true
          this.finished = true
        }
      })
    },
    onRefresh() {
      this.getData(true)
    },
    goDetails(articleId) {
      let level = this.$store.state.user.level

      if (level == 1 && this.state == 2) {
        this.$alert('您还不是会员！')
      } else {
        this.$router.push({
          name: 'homeDetails',
          params: {
            id: articleId
          }
        })
      }
    }
  }
};
</script>

<style scoped lang="less">
  .con-list {
    li {
      background-color: #fff;
      padding: 10px 15px;
      margin-bottom: 10px;
      .cl-title {
        font-size: 18px;
        color: #333;
        > span {
          display: inline-block;
          padding: 2px 5px;
          background-color: #f85;
          font-size: 12px;
          margin-right: 5px;
          border-radius: 3px;
          color: #fff;
          position: relative;
          top: -2px;
        }
      }
      .cl-show {
        margin-top: 5px;
        color: #666;
      }
      .cl-con {
        color: #999;
        margin-top: 10px;
        .cl-info {
          font-size: 12px;
          .cl-img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #ddd;
          }
          .cl-text {
            > p:first-child {
              font-size: 14px;
              color: #0075ea;
            }
            p > span > a {
              color: #6666ff;
            }
          }
        }
      }
      .see-num {
        font-size: 12px;
        padding-top: 22px;
        span {
          position: relative;
          top: -2px;
        }
      }
    }
  }
</style>
